Modern Tab Bar - Integration Guide

🚀 Quick Start

1. Basic Implementation

Replace your existing tab layout with the new modern tab bar:

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router"
import { BlurredTabBar, useTabBarConfig } from "@/components/tabbar"
import { useTabBarState } from "@/hooks/tabbar/useTabBarState"
import { TabBarItemConfig, DEFAULT_HAPTICS_CONFIG } from "@/types/tabbar"

export default function TabLayout() {
  // Define your tabs
  const tabConfigs: TabBarItemConfig[] = [
    {
      name: "index",
      title: "Dashboard",
      icon: "home",
      accessibilityLabel: "Dashboard tab",
    },
    {
      name: "swipe",
      title: "Swipe",
      icon: "heart",
      badge: 0,
    },
    {
      name: "recommendations",
      title: "Recommendations",
      icon: "star",
      badge: 0,
    },
    {
      name: "settings",
      title: "Settings",
      icon: "settings",
    },
  ]

  // State management
  const { state, setActiveTab, setBadge, getTabBadge } = useTabBarState("index", tabConfigs, DEFAULT_HAPTICS_CONFIG)

  // Configuration
  const tabBarConfig = useTabBarConfig(
    tabConfigs.map((tab) => ({
      ...tab,
      badge: getTabBadge(tab.name),
    })),
    state.activeTab,
    setActiveTab
  )

  return (
    <Tabs
      screenOptions={{ headerShown: false, tabBarStyle: { display: "none" } }}
      tabBar={(props) => (
        <BlurredTabBar
          {...tabBarConfig}
          activeTab={props.state.routes[props.state.index].name}
          onTabSelect={(tabName) => {
            const routeIndex = props.state.routes.findIndex((route) => route.name === tabName)
            if (routeIndex !== -1) {
              props.navigation.navigate(props.state.routes[routeIndex].name)
            }
            setActiveTab(tabName)
          }}
        />
      )}
    >
      <Tabs.Screen name="index" options={{ title: "Dashboard" }} />
      <Tabs.Screen name="swipe" options={{ title: "Swipe" }} />
      <Tabs.Screen name="recommendations" options={{ title: "Recommendations" }} />
      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
    </Tabs>
  )
}

2. Standalone Usage

Use the tab bar without Expo Router:

import { BlurredTabBar, useTabBarConfig } from "@/components/tabbar"
import { useTabBarState } from "@/hooks/tabbar/useTabBarState"

function MyComponent() {
  const tabConfigs = [
    { name: "home", title: "Home", icon: "home" },
    { name: "search", title: "Search", icon: "search", badge: 3 },
    { name: "profile", title: "Profile", icon: "person" },
  ]

  const { state, setActiveTab } = useTabBarState("home", tabConfigs, DEFAULT_HAPTICS_CONFIG)
  const tabBarConfig = useTabBarConfig(tabConfigs, state.activeTab, setActiveTab)

  return <BlurredTabBar {...tabBarConfig} />
}

🎨 Customization

Custom Blur Configuration

const customBlurConfig = {
  intensity: 90,
  tint: "dark" as const,
  enabled: true,
  fallbackColor: "rgba(0, 0, 0, 0.8)",
}

const tabBarConfig = useTabBarConfig(
  tabConfigs,
  activeTab,
  onTabSelect,
  customBlurConfig // Pass custom blur config
)

Custom Animations

const customAnimationConfig = {
  spring: { damping: 20, stiffness: 200, mass: 1 },
  duration: 300,
  useNativeDriver: true,
}

Badge Management

// Add badges dynamically
setBadge("notifications", 5)

// Clear specific badge
clearBadge("notifications")

// Get current badge count
const badgeCount = getTabBadge("notifications")

📱 Platform Features

iOS

• Native BlurView with system materials
• Haptic feedback on interactions
• Smooth spring animations

Android

• Material Design translucent background
• Proper elevation and shadows
• Alternative haptic feedback (if available)

Web

• CSS backdrop-filter support
• Fallback to translucent backgrounds
• Keyboard navigation support

♿ Accessibility

The tab bar includes comprehensive accessibility support:

• VoiceOver/TalkBack labels and hints
• Proper focus management for keyboard navigation
• High contrast mode support
• Reduced motion preferences respected
• Badge announcements for screen readers

🎯 Performance

• React.memo() optimization for tab items
• Native driver animations for 60fps performance
• Optimized re-renders with proper dependency arrays
• Lazy badge calculations for better performance

🔧 Troubleshooting

Tab bar not showing

• Ensure safe area provider is setup: <SafeAreaProvider>
• Check if headerShown: false in screen options
• Verify tab bar is not hidden: tabBarStyle: { display: "none" }

Blur not working on Android

• This is expected - Android uses Material Design alternatives
• Blur effects are iOS-specific for native feel

Icons not showing

• Verify icon names match Ionicons: home, search, settings, etc.
• Check if @expo/vector-icons is installed

Haptic feedback not working

• Haptics only work on iOS devices
• Ensure expo-haptics is installed
• Check device haptic settings

📚 API Reference

BlurredTabBar Props

interface TabBarConfig {
  tabs: TabBarItemConfig[]
  activeTab: string
  onTabSelect: (tabName: string) => void
  blur: TabBarBlurConfig
  animation: TabBarAnimationConfig
  haptics: TabBarHapticsConfig
  safeAreaAware: boolean
  floating: boolean
  style?: ViewStyle
}

TabBarItemConfig

interface TabBarItemConfig {
  name: string
  title: string
  icon: keyof typeof Ionicons.glyphMap
  badge?: number
  disabled?: boolean
  accessibilityLabel?: string
  accessibilityHint?: string
}

🎉 What's Next?

Phase 1 ✅ COMPLETE - Core architecture and basic functionality

• Platform-specific blur implementation
• Enhanced tab items with animations
• State management hooks
• TypeScript types and interfaces

Next Steps:

• Phase 2: Enhanced styling & animations
• Phase 3: Advanced features (long press, gestures)
• Phase 4: Performance & accessibility optimizations
• Phase 5: Final integration and testing

---

The modern tab bar is ready to use! Start with the basic implementation and customize as needed.